<template>
  <div id="role">
    <a-button type="primary"
    @click="showAddFrom()">添加角色</a-button>
    <a-table
      ref="table"
      :columns="columns"
      :data-source="roleList"
      :rowKey="(record) => record.roleId"
    >
    <template #do="record">
      <a-space>
        <a-button type="primary" shape="round" size="small" @click="showEditFrom(record.roleId)">编辑</a-button>
        <a-button type="danger" shape="round" size="small" @click="DeleteAccount(record.roleId)">删除</a-button>
      </a-space>
    </template>
      
    </a-table>

    <form-box title="添加角色"
    v-show="showAddFromFlag"
    @hide="hideAddFrom"
    @update="AddRole">
      <a-form-item label="角色名称">
        <a-input placeholder="单行输入" v-decorator="['name',{initialValue: getValue.name, rules:[{required: true, message: '请输入正确的角色名称'}]}]"></a-input>
        <a-collapse>
          <a-collapse-panel key="1" header="">

          </a-collapse-panel>
        </a-collapse>
      </a-form-item>
    </form-box>

    <form-box title="编辑角色"
    v-show="showEditFromFlag"
    @hide="hideEditFrom"
    @update="EditAccount">

    </form-box>
  </div>
</template>

<script>
import { fetchRoleList, requestDeleteRole, requestAddRole, requestUpdateRole } from "@/api/system/role"
import formBox from '../../components/formBox.vue';

export default {
  components: { formBox },
  data() {
    return {
      roleIndex: null,
      showAddFromFlag: true,
      showEditFromFlag: false,
      roleList: [],
      columns: [
        {
          title: "序号",
          dataIndex: "roleId",
          key: "roleId",
        },
        {
          title: "角色名称",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "人数",
          dataIndex: "numbers",
          key: "numbers",
        },
        {
          title: "操作",
          dataIndex: "do",
          key: "do",
          scopedSlots: { customRender: "do" },
        }

      ],
    }
  },
  methods:{
    //=======showEdit=======
    showEditFrom(index){
      this.roleIndex = index;
      this.showEditFromFlag = true;
    },
    hideEditFrom(){
      this.showEditFromFlag = false;
    },
    //========showAdd======
    showAddFrom(){
      this.showAddFromFlag = true;
    },
    hideAddFrom(){
      this.showAddFromFlag = false;
    },
    getRoleList(){
      fetchRoleList({
          token: "89c71f5f29d34b4699bcb516affc950d",
      }).then((res)=>{
          console.log("====role====",res.data.data);
          this.roleList = res.data.data;
      }).catch((_) => {
        console.log(_);
        //   this.confirmLoading = false;
      });
    },
    EditAccount({id, name, menuIds}){
      requestUpdateRole({
        id: id,
        name: name,
        menuIds: menuIds,
      }).then((res)=>{
          console.log("=====修改成功=====",res);
        this.getRoleList();
      }).catch((_) => {
        console.log(_);
        //   this.confirmLoading = false;
      });
    },
    DeleteAccount(roleId){
      requestDeleteRole({
        id: roleId
      }).then((res)=> {
        console.log("=====删除成功=====",res);
        this.getRoleList();
      }).catch((_) => {
        console.log(_);
        //   this.confirmLoading = false;
      });
    },
    AddRole({name, menuIds}){
      requestAddRole({
        name: name,
        menuIds: menuIds,
      }).then((res)=> {
        console.log("=====添加成功=====",res);
        this.getRoleList();
      }).catch((_) => {
        console.log(_);
        //   this.confirmLoading = false;
      });
    }
  },
  computed:{
    getValue(){
        if(this.roleIndex!=null)
        return this.roleList.filter(item =>
            item.roleId === this.roleIndex
        )[0];
        else return '';
    }
  },

  mounted(){
    this.getRoleList();
  }
}
</script>

<style>
</style>